<script setup lang="ts">
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
import { ref, nextTick } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  content: {
    type: String,
    default: '',
    required: true
  },
  id: {
    type: String,
    default: ''
  }
})

const visible = ref(props.show)

const close = async () => {
  visible.value = false
  await nextTick()
  const wrap = document.getElementById(props.id)
  if (!wrap) return
  document.body.removeChild(wrap)
}
</script>
<template>
  <Dialog v-model="visible" title="文本预览">
    <div>{{ content }}</div>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </Dialog>
</template>
